<template>
  <div>
    <el-button @click="addRole">添加权限</el-button>
    <el-button v-if="hasRole('main')" type="primary">主要按钮</el-button>
    <el-button v-if="hasRole('main-2')" type="success">成功按钮</el-button>
    <el-button v-if="hasRole('main-3')" type="info">信息按钮</el-button>
    <el-button v-if="hasRole('sub')" type="warning">警告按钮</el-button>
    <el-button v-if="hasRole('sub-1')" type="danger">危险按钮</el-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'buttonAuth',
  computed: {
    ...mapGetters([
      'hasRole'
    ])
  },
  methods: {
    addRole() {
      this.$store.commit('addAuth', ['main', 'main-2', 'mian-3', 'sub', 'sub-1'])
    }
  }
}
</script>

<style>

</style>
